<template>
  <div class="live-data" :style="{top:top,left:left}"  @mouseleave="mouseLeave(0)" style="display:flex" >
    <!-- <div class="data-txt">一标八实</div> -->
    <!-- <div v-if="liveDataObj.length" class="data-ctx" :style="{backgroundImage:'url('+borderBg+')'}">
      <div @click="onClickHandle('people')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_syrk.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[0].name}}</div>
          <div class="txt-number">{{liveDataObj[0].value | dialfilter}}</div>
        </div>
      </div>
      <div @click="onClickHandle('important')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_syrk.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[1].name}}</div>
          <div class="txt-number">{{liveDataObj[1].value | dialfilter}}</div>
        </div>
      </div>
      <div @click="onClickHandle('house')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_syfw.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[4].name}}</div>
          <div class="txt-number">{{liveDataObj[4].value | dialfilter}}</div>
        </div>
      </div>
       <div @click="onClickHandle('power')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_syll.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[6].name}}</div>
          <div class="txt-number">{{liveDataObj[6].value | dialfilter}}</div>
        </div>
      </div>
      <div @click="onClickHandle('unit')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_sydw.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[3].name}}</div>
          <div class="txt-number">{{liveDataObj[3].value | dialfilter}}</div>
        </div>
      </div>
      <div @click="onClickHandle('zhihuimenjin')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_syaf.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[5].name}}</div>
           <div class="txt-number">{{liveDataObj[5].value | dialfilter}}</div>
        </div>
      </div>
      <div @click="onClickHandle('car')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_sycl.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[2].name}}</div>
          <div class="txt-number">{{liveDataObj[2].value | dialfilter }}</div>
        </div>
      </div>
      <div @click="onClickHandle('zufang')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon/icon_menjin.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[9].name}}</div>
          <div class="txt-number">{{liveDataObj[9].value | dialfilter}}</div>
        </div>
      </div>

      <div @click="onClickHandle('lot')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_sywl.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[8].name}}</div>
          <div class="txt-number">{{liveDataObj[8].value | dialfilter}}</div>
        </div>
      </div>
      <div @click="onClickHandle('noc')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_sywl.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[7].name}}</div>
          <div class="txt-number">{{liveDataObj[7].value | dialfilter}}</div>
        </div>
      </div>

    </div> -->
    <div class="data-ctx1" :style="{backgroundImage:'url('+borderBg1+')'}">
      <div @mouseover="mouseOver(0)"  class="item-rs">
        <div class="rs-icon">
          <img class="pic" v-if="index===0" src="../../assets/images/icon_person_select.png" />
          <img class="pic" v-else  src="../../assets/images/icon_person.png" />

        </div>
        <div class="rs-txt">
          <div class="txt-name" :class="{ active: index === 0 }">人口管理</div>
        </div>
      </div>
      <div @mouseover="mouseOver(1)"  class="item-rs">
        <div class="rs-icon">
           <img class="pic" v-if="index===1" src="../../assets/images/icon_house_select.png" />
          <img class="pic" v-else src="../../assets/images/icon_house.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name" :class="{ active: index === 1 }">房屋管理</div>
        </div>
      </div>
      <div @mouseover="mouseOver(2)" class="item-rs">
        <div class="rs-icon">
          <img class="pic" v-if="index===2" src="../../assets/images/icon_safe_select.png" />
          <img class="pic" v-else src="../../assets/images/icon_safe.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name" :class="{ active: index === 2 }">安全防控</div>
        </div>
      </div>
      <div @mouseover="mouseOver(3)"  class="item-rs">
        <div class="rs-icon">
          <img class="pic" v-if="index===3" src="../../assets/images/icon_community_select.png" />
          <img class="pic" v-else src="../../assets/images/icon_community.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name" :class="{ active: index === 3 }">社区管理</div>
        </div>
      </div>
    </div>
    <div class="content content1" v-if="index==0" :style="{backgroundImage:'url('+backgroundpic +')'}">
      <div @click="onClickHandle('process')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/dialog/yibiaosanshi.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">业务流程</div>
          <!-- <div class="txt-number">{{liveDataObj[1].value | dialfilter}}</div> -->
        </div>
      </div>
      <div @click="onClickHandle('people')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_syrk.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[0].name}}</div>
          <div class="txt-number">{{liveDataObj[0].value | dialfilter}}</div>
        </div>
      </div>
      <div @click="onClickHandle('important')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_zdry.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[1].name}}</div>
          <div class="txt-number">{{liveDataObj[1].value | dialfilter}}</div>
        </div>
      </div>
      <div @click="onClickHandle('noc')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_sywl.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[7].name}}</div>
          <div class="txt-number">{{liveDataObj[7].value | dialfilter}}</div>
        </div>
      </div>

    </div>
     <div class="content content2" style="margin-top:64px" v-if="index==1" :style="{backgroundImage:'url('+backgroundpic +')'}">
      <div @click="onClickHandle('house')" class="item-rs">
          <div class="rs-icon">
            <img class="pic" src="../../assets/images/icon_syfw.png" />
          </div>
          <div class="rs-txt">
            <div class="txt-name">{{liveDataObj[4].name}}</div>
            <div class="txt-number">{{liveDataObj[4].value | dialfilter}}</div>
          </div>
        </div>
        <div @click="onClickHandle('zufang')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon/icon_menjin.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[9].name}}</div>
          <div class="txt-number">{{liveDataObj[9].value | dialfilter}}</div>
        </div>
      </div>
    </div>
     <div class="content3" v-if="index==2"   :style="{backgroundImage:'url('+backgroundpic +')'}">
      <div @click="onClickHandle('lot')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_sywl.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[8].name}}</div>
          <div class="txt-number">{{liveDataObj[8].value | dialfilter}}</div>
        </div>
      </div>
      <div @click="onClickHandle('zhihuimenjin')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_zhmj.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[5].name}}</div>
           <div class="txt-number">{{liveDataObj[5].value | dialfilter}}</div>
        </div>
      </div>
      <!-- <div @click="onClickHandle('control')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_rcbk.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[11].name}}</div>
          <div class="txt-number">{{liveDataObj[11].value | dialfilter}}</div>
        </div>
      </div> -->
       <div @click="onClickHandle('power')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_syll.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[6].name}}</div>
          <div class="txt-number">{{liveDataObj[6].value | dialfilter}}</div>
        </div>
      </div>
      <div @click="onClickHandle('devicesalerm')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_sbbj.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[10].name}}</div>
          <div class="txt-number">{{liveDataObj[10].value | dialfilter}}</div>
        </div>
      </div>

    </div>
    <div class="content content4"  v-if="index==3" :style="{backgroundImage:'url('+backgroundpic +')'}">
       <div @click="onClickHandle('car')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_sycl.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[2].name}}</div>
          <div class="txt-number">{{liveDataObj[2].value | dialfilter }}</div>
        </div>
      </div>
      <div @click="onClickHandle('unit')" class="item-rs">
        <div class="rs-icon">
          <img class="pic" src="../../assets/images/icon_sydw.png" />
        </div>
        <div class="rs-txt">
          <div class="txt-name">{{liveDataObj[3].name}}</div>
          <div class="txt-number">{{liveDataObj[3].value | dialfilter}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Livedata",
  data() {
    return {
      borderBg: require("@/assets/images/bg_livedata.png"),
      borderBg1: require("@/assets/images/bg_livedata1.png"),
      index:null,
      backgroundpic:require("@/assets/images/background.png")
    };
  },
  props: {
    top: {
      type: String,
      default: "7.2rem"
    },
    left: {
      type: String,
      default: "2.05rem"
    },
    id: {
      type: [String, Number, Object]
    },
    leader: {
      type: String,
      default: ""
    },
    liveDataObj: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  mounted() {
    console.log("1111",this.liveDataObj)
  },
  methods: {
    onClickHandle(type) {
      console.log(type);
      this.$emit("onClickHandle", type);
    },
    mouseOver(id){
      this.index=id
    },
    mouseLeave(id){
      this.index=null
    }
  }
};
</script>

<style lang="less" scoped>
.live-data {
  // width: 500px;
  position: absolute;
  .data-txt {
    width: 100%;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 19px;
    color: #e9e9e9;
    text-align: left;
  }
  .data-ctx {
    width: 350px;
    height: 320px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding: 28px 25px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: wrap;
    .item-rs {
      width: 50%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 44px;
      box-sizing: border-box;
      cursor: pointer;
      margin-bottom: 5px;
      .rs-icon {
        width: 18px;
        height: 18px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .pic {
          width: 100%;
          height: 100%;
        }
      }
      .rs-txt {
        width: calc(100% - 18px);
        padding-left: 8px;
        padding-right: 10px;
        box-sizing: border-box;
        .txt-name {
          height: 50%;
          line-height: 22px;
          font-size: 11px;
          color: #fff;
          padding: 2px 8px;
          box-sizing: border-box;
          text-align: left;
        }
        .txt-number {
          height: 50%;
          line-height: 22px;
          font-size: 14px;
          color: #d0b01c;
          padding: 4px 8px;
          box-sizing: border-box;
          text-align: left;
          position: relative;
          &:after {
            content: "";
            position: absolute;
            top: 0;
            width: 80%;
            left: 4px;
            height: 1px;
            border-top: 1px dashed rgba(114, 237, 245, 0.57);
          }
        }
      }
    }
  }
  .content{
     .item-rs {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 44px;
      box-sizing: border-box;
      cursor: pointer;
      margin-bottom: 12px;
      .rs-icon {
        width: 18px;
        height: 18px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .pic {
          width: 100%;
          height: 100%;
        }
      }
      .rs-txt {
        width: calc(90% - 18px);
        padding-left: 8px;
        padding-right: 10px;
        box-sizing: border-box;
        .txt-name {
          height: 50%;
          line-height: 22px;
          font-size: 11px;
          color: #fff;
          padding: 2px 8px;
          box-sizing: border-box;
          text-align: left;
        }
        .txt-number {
          height: 50%;
          line-height: 22px;
          font-size: 14px;
          color: #d0b01c;
          padding: 4px 8px;
          box-sizing: border-box;
          text-align: left;
          position: relative;
          &:after {
            content: "";
            position: absolute;
            top: 0;
            width: 80%;
            left: 4px;
            height: 1px;
            border-top: 1px dashed rgba(114, 237, 245, 0.57);
          }
        }
      }
    }
  }
   .content3{
      margin-top:46px;
    margin-left:16px;
    width: 200px;
    height: 300px;
    padding: 16px 19px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: flex-start;
        box-sizing: border-box;
     .item-rs {
        // width: 50%;
      display: flex;
      // justify-content: flex-start;
      align-items: center;
      height: 44px;
      box-sizing: border-box;
      cursor: pointer;
      margin-bottom: 24px;
      .rs-icon {
        width: 18px;
        height: 18px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .pic {
          width: 100%;
          height: 100%;
        }
      }
      .rs-txt {
        width: calc(100% - 18px);
        padding-left: 8px;
        padding-right: 10px;
        box-sizing: border-box;
        .txt-name {
          height: 50%;
          line-height: 22px;
          font-size: 11px;
          color: #fff;
          padding: 2px 8px;
          box-sizing: border-box;
          text-align: left;
        }
        .txt-number {
          height: 50%;
          line-height: 22px;
          font-size: 14px;
          color: #d0b01c;
          padding: 4px 8px;
          box-sizing: border-box;
          text-align: left;
          position: relative;
          &:after {
            content: "";
            position: absolute;
            top: 0;
            width: 80%;
            left: 4px;
            height: 1px;
            border-top: 1px dashed rgba(114, 237, 245, 0.57);
          }
        }
      }
    }
  }
  .content1{
    margin-left:16px;
     width: 176px;
    height: 208px;
    padding: 16px 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
   .content2{
    margin-left:16px;
     width: 176px;
    height: 112px;
    padding: 16px 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
    .content4{
    margin-top:196px;
    margin-left:16px;
    width: 176px;
    height: 112px;
    padding: 16px 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  .data-ctx1{
     width: 128px;
    height: 352px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding: 28px 15px;
    box-sizing: border-box;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // flex-flow: wrap;
    cursor: pointer;
    .item-rs{
      margin-bottom: 15px;
      .rs-icon {
        width: 32px;
        height: 32px;
         margin:0 auto;
        .pic {
          width: 100%;
          height: 100%;
        }
      }
      .txt-name {
          height: 50%;
          line-height: 22px;
          font-size: 10px;
          color: #fff;
          padding: 2px 0;
          box-sizing: border-box;
          // text-align: left;
        }
        .active{
          color:#72edf5
        }
    }

  }
}
</style>
